<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>管理系统</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>

</head>

<body data-theme="translucent">
<!--End 左侧导航-->
<%@ include file="../jsp/left.jsp"%>

<!--头部信息-->
<%@ include file="../jsp/head.jsp"%>

<!--End 头部信息-->

<!--页面主要内容-->
<main class="lyear-layout-content">

    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header"><h4>教师注册</h4></div>
                    <div class="card-body">
                        <form action="${pageContext.request.contextPath}/tea/register" method="post" class="guide-box form-horizontal" data-navigateable="true" id="form">
                            <ul class="nav-step step-dots">
                                <li class="nav-step-item active">
                                    <span>1</span>
                                    <a class="active" data-toggle="tab" href="#step-1"></a>
                                </li>
                                <li class="nav-step-item">
                                    <span>2</span>
                                    <a data-toggle="tab" href="#step-2"></a>
                                </li>
                                <li class="nav-step-item">
                                    <span>3</span>
                                    <a data-toggle="tab" href="#step-3"></a>
                                </li>
                            </ul>
                            <!--对应内容-->
                            <div class="nav-step-content">
                                <div class="nav-step-pane hidden active" id="step-1">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label" for="name">姓名:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="text" id="name" name="name" placeholder="请输入姓名">
                                        </div>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <label class="radio-inline col-md-2 col-md-offset-6" for="male">
                                                    <input type="radio" id="male" name="gander" value="male">
                                                    男
                                                </label>
                                                <label class="radio-inline col-md-4" for="female">
                                                    <input type="radio" id="female" name="gander" value="female">
                                                    女
                                                </label>
                                            </div>
                                        </div>
                                        <label class="col-md-4 control-label" for="idcard">身份证号:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="text" id="idcard" name="idcard" placeholder="请输入身份证号">
                                        </div>
                                    </div>
                                </div>
                                <div class="nav-step-pane hidden" id="step-2">

                                    <div class="form-group">
                                        <label class="col-md-4 control-label" for="college">所属学院:</label>
                                        <div class="col-md-5">
                                            <%--需要改成数据库的查询的形式--%>
                                            <select class="selectpicker form-control" name="college" id="college" data-with="auto">
                                                <option selected value="">--- 请选择 ---</option>
                                                <option value="1">文学院</option>
                                                <option value="2">理学院</option>
                                                <option value="3">工学院</option>
                                                <option value="4">国际学院</option>
                                            </select>
                                        </div>
                                        <label class="col-md-4 control-label" for="profession">研究方向:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="text" id="profession" name="profession" placeholder="专业名称">
                                        </div>
                                        <label class="col-md-4 control-label" for="title">职称:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="text" id="title" name="title" placeholder="   职称">
                                        </div>
                                    </div>
                                </div>

                                <div class="nav-step-pane hidden" id="step-3">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label" for="password">密码:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="text" id="password" name="password" placeholder="请输入密码">
                                        </div>
                                        <label class="col-md-4 control-label" for="rePassword">确认密码:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="text" id="rePassword" placeholder="再次确认密码">
                                        </div>
                                        <label class="col-md-4 control-label" for="email">邮箱:</label>
                                        <div class="col-md-5">
                                            <input class="form-control" type="email" id="email" name="email" placeholder="请输入邮箱">
                                        </div>
                                    </div>
                                </div>

                                <!--End 对应内容-->
                                <hr>
                                <div class="nav-step-button">
                                    <div style="text-align: center;" class="col-md-4">
                                        <button type="button" class="btn btn-primary btn-circle btn-xl disabled" data-wizard="prev"><i class="glyphicon glyphicon-ok"></i>上一步</button>
                                    </div>

                                    <div style="text-align: center;" class="col-md-4">
                                        <button type="submit" class="btn btn-primary btn-circle btn-xl hidden" data-wizard="finish" id="submit"><i class="glyphicon glyphicon-ok"></i>点击注册</button>
                                    </div>

                                    <div style="text-align: center;" class="col-md-4 ">
                                        <button type="button" class="btn btn-primary btn-circle btn-xl" data-wizard="next"><i class="glyphicon glyphicon-ok"></i>下一步</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

        </div>

    </div>

</main>

</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-select/bootstrap-select.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.guide-box').bootstrapWizard({
            'tabClass': 'nav-step',
            'nextSelector': '[data-wizard="next"]',
            'previousSelector': '[data-wizard="prev"]',
            'finishSelector': '[data-wizard="finish"]',
            'onTabClick': function(e, t, i) {
                if (!$('.guide-box').is('[data-navigateable="true"]')) return ! 1
            },
            'onTabShow': function(e, t, i) {
                t.children(":gt(" + i + ").complete").removeClass("complete");
                t.children(":lt(" + i + "):not(.complete)").addClass("complete");
            },
            'onFinish': function(e, t, i) {
                // 点击完成后处理提交
                return false;
            }
        });
    });
</script>


<script>


    // alert(username)
    // alert(tid)
    // alert(idcard)
    // alert(college)
    // alert(profession)
    // alert(job)
    // alert(password.val())
    // alert(rePassword.val())
    // alert(email)
    $("#submit").on("click", function(){
        var username = $("#name").val();
        var tid = $("#gander").val();
        var idcard = $("#idcard").val();
        var college = $("#college").val();
        var profession = $("#profession").val();
        var job = $("#title").val();
        var password = $("#password")
        var rePassword = $("#rePassword");
        var email = $("#email").val();
        if ((username != ""  && idcard != "" && college != "" && profession != "" && job != "" && password.val() != "" && rePassword.val() != "" && email != "")
            &&username != null  && idcard != null && college != null && profession != null && job != null && password.val() != null && rePassword.val() != null && email != null) {
            if (rePassword.val() != password.val()) {
                rePassword.parent().addClass("has-error")
                    layer.open({
                        type: 1,
                        area : ["150px", "75px"],
                        closeBtn: 0, //不显示关闭按钮
                        title : false,
                        anim: 6,
                        shadeClose: true, //开启遮罩关闭
                        time: 2000,
                        content:  '<div style="margin: auto; width: 100%; height: 100%" class="alert alert-success" role="alert"><h4 style="text-align: center">密码不一致</h4></div>',
                        end: function () {
                            window.location.reload()
                        }
                    });
                return false;
            } else {
                    rePassword.parent().removeClass("has-error");
                    return true
            }

        }
        layer.open({
            type: 1,
            area : ["150px", "75px"],
            closeBtn: 0, //不显示关闭按钮
            title : false,
            anim: 6,
            shadeClose: true, //开启遮罩关闭
            time: 2000,
            content:  '<div style="margin: auto; width: 100%; height: 100%" class="alert alert-success" role="alert"><h4 style="text-align: center">有信息未填</h4></div>',
            end: function () {
                window.location.reload()
            }

        });
        return false;


    });

</script>
<script>

        $(".selectpicker").selectpicker();
</script>
</html>